<template>
  <div>
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex2"
                 class="el-menu-demo1"
                 mode="horizontal"
                 @select="handleSelect"
                 background-color="#FFA07A"
                 text-color="#fff"
                 active-text-color="#666666">
          <el-menu-item @click="openVisitDialog()">咨询</el-menu-item>
          <el-menu-item @click="dddd()">定制</el-menu-item>
          <Visit :dialogFormVisible="dialogFormVisible"></Visit>
          <el-submenu index="1">
            <template slot="title">
              <el-col :span="12">
                <div class="demo-basic--circle">
                  <div class="block"
                       v-for="size in sizeList"
                       :key="size">
                    <el-avatar :size="size"
                               :src="circleUrl"></el-avatar>
                  </div>
                </div>
              </el-col>
            </template>
            <el-menu-item index="2-1"
                          @click="goBackgroundCenter(userId)">个人中心
            </el-menu-item>
            <el-menu-item index="2-2">修改信息</el-menu-item>
            <el-menu-item index="2-3">通知</el-menu-item>
            <el-menu-item index="2-4"
                          @click="logout">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
    </el-container>
  </div>
</template>
  
  <script>
import MainMenu from "./MainMenu.vue";
import Visit from "./Visit.vue";
export default {
  data () {
    return {
      dialogFormVisible: {
        show: false,
      },
      a: require("../assets/images/hangzhou.jpg"),
      b: require("../assets/images/xian.jpg"),
      c: require("../assets/images/xianggang.jpg"),
      d: require("../assets/images/chong.jpg"),
      e: require("../assets/images/jie1.jpg"),
      f: require("../assets/images/jie2.jpg"),
      g: require("../assets/images/jie4.jpg"),
      srcList: [
        require("../assets/images/hang1.jpg"),
        require("../assets/images/hang2.jpg"),
        require("../assets/images/hang3.jpg"),
      ],
      srcList1: [
        require("../assets/images/xian1.jpg"),
        require("../assets/images/xian2.jpg"),
        require("../assets/images/xian3.jpg"),
      ],
      srcList2: [
        require("../assets/images/xiang1.jpg"),
        require("../assets/images/xiang2.jpg"),
        require("../assets/images/xiang3.jpg"),
      ],
      srcList3: [
        require("../assets/images/chong1.jpg"),
        require("../assets/images/chong2.jpg"),
      ],
      srcfour: [
        { src: require("../assets/images/gg1.heic") },
        { src: require("../assets/images/gg2.heic") },
        { src: require("../assets/images/gg3.heic") },
        { src: require("../assets/images/gg4.heic") },
        { src: require("../assets/images/gg5.heic") },
        { src: require("../assets/images/gg6.heic") },
      ],
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      sizeList: ["small"],
      user: "",
      staff: "",
      userId: "",
    };
    MainMenu;
  },
  components: { Visit },
  methods: {
    logout () {
      sessionStorage.clear();
      this.$router.push("/");
      this.$message.success("账户已安全退出");
    },
    openVisitDialog () {
      this.dialogFormVisible.show = true;
    },
    dddd(){
      this.$router.push("/OrderCore");
    },
    goBackgroundCenter () {
      //this.user = JSON.parse(sessionStorage.getItem("user"));
      //this.staff = JSON.parse(sessionStorage.getItem("staff"));
      if (JSON.parse(sessionStorage.getItem("user")) != null) {
        this.user = JSON.parse(sessionStorage.getItem("user"));
        this.userId = this.user.userId;
        this.$router.push("/user");
        sessionStorage.setItem("userId", JSON.stringify(this.userId));
        // sessionStorage.clear();
        this.user = "";
      } else if (JSON.parse(sessionStorage.getItem("staff")) != null) {
        this.$router.push("/BackgroundCenter");
        this.staff = "";
      }
    },
  },
  created () { },
};
</script>
  <style>
.aaa {
  font-size: 20px;
  color: black;
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.hangzhou {
  font-size: 25px;
  color: #808080;
  margin-left: 100px;
}
.xianggang {
  font-size: 25px;
  color: #808080;
  margin-left: 400px;
}
.xian {
  font-size: 25px;
  color: #808080;
  margin-left: 300px;
}
.chongqing {
  font-size: 25px;
  color: #808080;
  margin-left: 330px;
}
.chanpin {
  font-size: 30px;
  text-align: center;
  color: #333;
  font-family: "Courier New", Courier, monospace;
}
.el-header,
.el-footer {
  background-color: #ffa07a;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  line-height: 60px;
  width: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-menu-demo1 {
  margin-left: 1300px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 500px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  margin-top: 260px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>